<div id='lyric-holder'>
<form action="" method="POST" accept-charset="utf-8">
<table class="">
	<thead >
		<tr >
			<th class='lline'>
				L
			</th>
			<th class='ltype'>
				T
			</th>
			<th class='ly'>
				T1
			</th>
			<th class='ly llink'>
				L1
			</th>
			<th class='ly llink'>
				L2
			</th>
			<th class='ly'>
				T2
			</th>
			<th class='ly'>
				T3
			</th>
			<th class='laction'>
				A
			</th>
		</tr>
	</thead>
	<tbody >
	</tbody>
	<tfoot >
		<tr >
			<td ></td>
			<td ></td>
			<td ></td>
			<td ></td>
			<td ></td>
			<td ></td>
			<td ></td>
			<td ><span class='add'></span></td>
		</tr>
	</tfoot>
</table>
<button class='bt3'> Submit </button>
</form>

</div>

<style type="text/css" media="screen">
#lyric-holder table{width:100%;}
#lyric-holder table input[type="text"]{width:100%;height:100%;margin:0;padding:0;border:0;}
#lyric-holder table thead th{background-color:#CCC;border:1px solid #CCC;}

#lyric-holder table th.ly{cursor:pointer;}
#lyric-holder table td{border:1px solid #CCC;}
#lyric-holder table th.ltype{width:20px;}
#lyric-holder table th.lline{width:14px;}
#lyric-holder table th.laction{width:64px;}

#lyric-holder table td.lhide{width:10px;}

#lyric-holder table select.lyname{width:60px;}

/* icon */
#lyric-holder span.moveup,#lyric-holder span.movedown,#lyric-holder span.add,#lyric-holder span.remove
{display:inline-block;width:20px;height:20px;background-repeat:no-repeat;background-position:center;cursor:pointer;margin:0;}
#lyric-holder span.moveup{background-image:url(/img/icons/tree-moveup.gif);}
#lyric-holder span.movedown{background-image:url(/img/icons/tree-movedown.gif);}
#lyric-holder span.remove{background-image:url(/img/icons/delete.png);}
#lyric-holder span.add{background-image:url(/img/icons/add.png);}
</style>
<script type="text/javascript" charset="utf-8">
var jsonpost = false;
<?php if(!empty($jsonpost)) echo 'jsonpost = '.$jsonpost.';';?>
var count = {'t':5,'l':2};

$(function(){
	init();
	initEvent();
	reInitEvent();
	
	// generate html
	//$('div#lyric-holder').html();
});
function init () {
	
	// hide link lyric
	$('.llink').addClass('lhide');
	$('.lhide').each(function(e){
		var target = $( this );
		$('#lyric-holder tr td:nth-child('+(target.index()+1)+')').addClass('lhide');
	});
}
function initEvent () {
	// add
	$('span.add').click(function(e){
		$('#lyric-holder tbody').append(addLyricInput());
		resetIndexNumber();
		reInitEvent();

	});
}
function reInitEvent () {
	
	$('#lyric-holder thead th,#lyric-holder tbody span.moveup,#lyric-holder tbody span.movedown,#lyric-holder tbody span.remove').unbind();
	// toggle hide column
	$('#lyric-holder thead th').click(function(e){
		var target = $( this );
		if (target.hasClass('lhide')) {
			target.removeClass('lhide');
			$('#lyric-holder tr td:nth-child('+(target.index()+1)+')').removeClass('lhide');
		} else {
			target.addClass('lhide');
			$('#lyric-holder tr td:nth-child('+(target.index()+1)+')').addClass('lhide');
		}
	});
	
	// move up down remove
	$('#lyric-holder tbody span.moveup').click(function(e){
		var target = $( this );
		var pre = target.closest('tr').prev('tr');
		pre.before(target.closest('tr'));
		resetIndexNumber();
	});
	$('#lyric-holder tbody span.movedown').click(function(e){
		var target = $( this );
		var pre = target.closest('tr').next('tr');
		pre.after(target.closest('tr'));
		resetIndexNumber();
	});
	$('#lyric-holder tbody span.remove').click(function(e){
		var target = $( this );
		target.closest('tr').remove();
		resetIndexNumber();
	});
}

function addLyricInput () {
	var selectname = '<select name="name[]" id="name[]" class="lyname">'
		+'<option value=""> - 			</option>'
		+'<option value="i">Intro		</option>'
		+'<option value="v">Verse		</option>'
		+'<option value="p">PreChorus	</option>'
		+'<option value="c">Chorus		</option>'
		+'<option value="b">Bridge		</option>'
		+'<option value="h">HiPraise	</option>'
		+'<option value="o">Outro		</option>'
	+'</select>';
	var htmlaction = "<span class='moveup'></span><span class='movedown'></span><span class='remove'></span>";
	var html = $(_tr(_td('')+_td(selectname)+_lyricInput(count['t'])+_td(htmlaction)));
	$('#lyric-holder tbody').append(html);

	
	function _td(html){return '<td>'+html+'</td>';}
	function _tr(html){return '<tr>'+html+'</tr>';}
	function _lyricInput(n){
		var temp = '';
		for (var i = 1; i <=n ; i++)
			temp += _td('<input type="text" name="lyric['+i+'][]" value="" id="lyric['+i+'][]" />');
		return temp;
	}
}

function resetIndexNumber(){
	$('#lyric-holder tbody tr').each(function(){
		var target = $(this);
		var test = target.children('td:first').html((target.index()+1));
	});
}
</script>